<template>
	<mxq-router-layout>
		<div class="xianlu line-list">
			<Head slot="header" @headerClick="headerClick($event)">
				<div slot="headerTitle">
					<span>线路检修</span>
				</div>
				<div slot="headerRight">
					<span>新增</span>
				</div>
			</Head>
			<xs-list
				:list = "taskListsZJ"
				:listLeftImg="listLeftImg"
				:listTitle="listTitle"
				:deleteAble="true"
				@listClick="listClick($event)"
				@onClose="onClose($event)"/>
			<!-- 弹出层 开始 -->
			<div class="pop_up">
				<van-popup v-model="show">
					<div class="arrow-up"></div><!--向上的三角-->
					<van-cell-group>
						<van-cell title="故障" class="icon1" @click="addTask(0)"/>
						<van-cell title="应急" class="icon2" @click="addTask(3)" />
						<van-cell title="保电" class="icon3" @click="addTask(2)"/>
						<van-cell title="特殊天气" class="icon4" @click="addTask(4)"/>
						<van-cell title="监察" class="icon5" @click="addTask(1)"/>
					</van-cell-group>
				</van-popup>
			</div>
			<!-- 弹出层 结束 -->
		</div>
	</mxq-router-layout>
</template>

<script>
import Head from '../../../components/head';
import XsList from '../../../components/xs-list';
import IconWks from '../../../assets/img/changguixunshi/icon_wks.png';
import IconJxz from '../../../assets/img/changguixunshi/icon_jxz.png';
import IconYwc from '../../../assets/img/changguixunshi/icon_ywc.png';
import { callData } from '../../../axios/axios';
import { stSelectTower } from '../../../api/android'
import {
	Cell,
	CellGroup,
	Button,
	Popup,
	Icon,
	Tab,
	Tabs,
	Dialog,
	Toast
} from 'vant';

export default {
    components: {
		[Icon.name]: Icon,
		[Tab.name]:Tab,
		[Tabs.name]:Tabs,
		[Cell.name]: Cell,
		[CellGroup.name]: CellGroup,
		[Button.name]: Button,
		[Popup.name]: Popup,
        [Dialog.name]:Dialog,
        [Toast.name]:Toast,
		Head,
        XsList
	},
	
	data() {
		return {
			active: '',
			taskListsPF: [ ],
			taskListsZJ: [ ],
			listLeftImg: [IconWks,IconJxz,IconYwc],		//列表左侧图标
			listTitle: ['','杆塔数：','未巡视：'],//列表自定义key
			show: false,
			xinzeng: false
		}
	},
	mounted() {
		this.getTaskZJ();//获取自建任务数
    },
    methods: {
		// 头部两侧按钮点击事件
		headerClick(e){
			this.show=true
		},
		// 任务列表点击事件
		listClick(e){
			if(e.todo==0){
				if(e.data.KEY_INFO){
	        		Dialog.alert({
					  title: '重要告知',
					  message: e.data.KEY_INFO
					}).then(() => {
					  // on close
					});
	        	}
			}else {
				let query = {}
				this.$router.push({
					name:'xljx_gantaXunshi',
					query: {
						taskId: e.data.ID,
						taskStatus:e.data.STATUS,
						index: this.$route.query.index
					}
				})
			}
		},
		//获取自建任务列表
		getTaskZJ(){
			var params ={
				page : 0,
				size : 800,
				createType : 1
			};
			callData('/jxtaskServer/JxTowerTask/findJxTaskByUserId', 'get', params).then(res => {
				var xsData = res.data.content;
				xsData.forEach((item,index) => {
					item.line = item.TASK_NAME; //线路名称
					item.gtnum = item.TOTAL; //杆塔总数
					item.wxsnum = item.WX; //未巡杆塔数
					item.date = item.PLAN_END_TIME; //计划结束时间
					// 状态判断
					if (item.STATUS == 0) {
						item.status = item.STATUS;
						item.statusName = '未巡视';
						item.cname = "btn_status";
						item.cname1 = 'btn_statusNo';
					}else if (item.STATUS == 1) {
						item.statusName = '进行中';
						item.cname="btn_status1";
						item.cname1 = 'btn_statusNo';
						item.status = item.STATUS;
					}else if(item.STATUS == 2) {
						item.statusName = '已完成';
						item.status = item.STATUS;
						item.cname="btn_status2";
						item.cname1 = 'btn_statusNo';
					}
				});
				this.taskListsZJ = xsData;
			})
		},
		addTask(num){//0故障  1监察  2保电  3应急  4特殊天气
			if(window.Cordova){
				stSelectTower(1,1,res => {
					console.log('开启线路检修巡视地图页成功！',res)
					var zjData = res.data.towers;
					//安卓成功返回数据之后调后台接口
					callData('/jxtaskServer/JxTask/appSaveJxTask', 'post', {
						taskJson:zjData,
						xsTarget:num
					}).then(res => {
						this.show = false;
						Toast(res.data);
						if(res.success){
							this.getTaskZJ();
						}
					})
				},err => {
					console.log('开启特殊巡视地图页失败！',err)
				})
			}else{
				Dialog.alert({
					message: '请在安卓坏境下操作！'
				}).then(() => {
					// on close
				});
			}
		},
		//删除自建任务
		onClose(item){
			callData('/jxtaskServer/JxTowerTask/appJxTaskDel', 'delete', {
				id:item.ID
			}).then(res => {
				Toast(res.data);
				this.getTaskZJ()
			})
		}
	}
}
</script>

<style lang="less">
.xianlu{
    .pop_up {
        .van-cell-group {
            margin-bottom: 0;
            border-radius: 5px;
            .van-cell {
                border-radius: 10%;
            }
        }
        .van-popup {
            width: 32%;
            right: 0;
            top: 24%;
            left: 82%;
            background: transparent;
            .arrow-up {
                width:0;
                height:0;
                border-left:.5rem solid transparent;
                border-right:.5rem solid transparent;
                border-bottom:.5rem solid #fff;
                margin-left: 75%;
            }
            .icon1{
            	background:url('../../../assets/img/teshuxunshi/icon_guzhang.png') no-repeat 14% center;
            	background-size: 12%;
            }
            .icon2{
            	background:url('../../../assets/img/teshuxunshi/icon_yingji.png') no-repeat 14% center;
            	background-size: 12%;
            }
            .icon3{
            	background:url('../../../assets/img/teshuxunshi/icon_baodian.png') no-repeat 14% center;
            	background-size: 12%;
            }
            .icon4{
            	background:url('../../../assets/img/teshuxunshi/icon_tianqi.png') no-repeat 14% center;
            	background-size: 12%;
            }
            .icon5{
            	background:url('../../../assets/img/teshuxunshi/icon_jiancha.png') no-repeat 14% center;
            	background-size: 12%;
            }
            .van-cell__title {
                color: #373A3B;
                margin-left: 25px;
            }
            .van-cell{
                text-align: left;
            }
        }
        .van-modal {
            background-color: rgba(0,0,0,.3);
        }
    }
}
</style>
